<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // axios({
    //   url: 'http://hmajax.itheima.net/api/province',

    // }).then(res => {
    //   const pname = res.data.list[0]
    //   console.log(pname)
    //   document.querySelector('.province').innerHTML = pname
    //   axios({
    //     url: 'http://hmajax.itheima.net/api/city',
    //     params: {
    //       pname
    //     }
    //   }).then(res => {
    //     const cname = res.data.list[0]
    //     console.log(cname)
    //     document.querySelector('.city').innerHTML = cname
    //     axios({
    //       url: 'http://hmajax.itheima.net/api/area',
    //       params: {
    //         pname,
    //         cname
    //       }
    //     }).then(res => {
    //       document.querySelector('.area').innerHTML = res.data.list[0]
    //     })
    //   })
    // })

    // 使用promise对象解决回调地狱
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(res => {
      pname = res.data.list[0]
      document.querySelector('.province').innerHTML = pname
      return axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: {
          pname
        }
      })
    }).then(res => {
      const cname = res.data.list[0]
      document.querySelector('.city').innerHTML = cname
      return axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname,
          cname
        }
      })
    }).then(res => {
      const aname = res.data.list[0]
      document.querySelector('.area').innerHTML = aname
    })
  </script>
</body>

</html>